You said:
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import CsrMountTracker from "@/provider/CsrMountTracker";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body
className={
${geistSans.variable} ${geistMono.variable} antialiased}
>
<CsrMountTracker>{children}</CsrMountTracker>
</body>
</html>
);
}
this is my structure
"use client";
import { useEffect } from "react";
const CsrMountTracker = ({ children }) => {
useEffect(() => {
alert("Hydration Completed");
},[]);
return <>{children}</>;
};
export default CsrMountTracker;
tell me when alert will shown